<template>
  <div class="leftbar_container">
    <ul>
      <li v-for="(item,index) in tabList" 
      :key="index"
      :index="index"
      @click.prevent="changeTab">
        {{item}}
      </li>
      <!-- <li @click="changeTab(0)"  v-bind:class="{active: isActive}">树目录</li>
      <li @click="changeTab(1)">图例</li>
      <li @click="changeTab(2)">搜索</li> -->
    </ul>
    <keep-alive>
      <component v-bind:is="currentTabComponent"></component>
    </keep-alive>
  </div>
</template>
<script>
import leftbar0 from './leftbar0.vue'
import leftbar1 from './leftbar1.vue'
import leftbar2 from './leftbar2.vue'
export default {
  name: "leftbar",
  data() {
    return {
      tabList:[
        '树目录',
        '图例',
        '搜索'
      ],
      currentTabComponent:'leftbar0'
    };
  },
  components: {
    leftbar0,leftbar1,leftbar2
  },
  methods: {
    changeTab(event){
      let menulist = {
        "树目录":"0",
        "图例":"1",
        "搜索":"2"
      }
      // 移除所有tab的active标签
      event.target.parentNode.childNodes.forEach(item => {
        item.classList.remove("active");
      });
      // 添加该tab的active标签
      event.target.className = "active";
      this.currentTabComponent = 'leftbar'+menulist[event.target.innerText];
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@assets/style/variables.scss";
.leftbar_container{
  width: $leftWidth;
  height: $leftHeight;
  position: relative;
  text-align: center;
  ul{
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
    height:0;
    padding-bottom: 34px;
    li{
      float: left;
      width: 83.33px;
      box-sizing: border-box;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border-right: 1px #ccc solid;
      border-bottom: 1px #ccc solid;
      &:hover{
        background-color:#eee;
        border-bottom: 1px #fff solid;
      }
    }
  }
}
.active{
  background-color:#eee;
  border-bottom: 1px #fff solid;
}
</style>